import React from 'react';
import { Link } from 'react-router-dom';
import { observer, inject } from 'mobx-react';

import { TopHeader } from '../../components';

import './index.scss'


@inject('courseListStore')
@inject('chapterListStore')
@inject('baseStore')
@observer
class CourseListPage extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
			activeIndex: 0
		};

		// 为了在回调中使用 `this`，这个绑定是必不可少的
		this.handleClick = this.handleClick.bind(this);
	}

	pageChangeNoticeToServer = () => {
		var data = {
			header: this.props.baseStore.socketData.header,
			body: {
				type: "page_change",
				content: "/courseList"
			}
		};
		//给服务端发送 sendMsg事件名的消息
		this.props.baseStore.socketData.socket.emit("teach_app_to_server", data);
	}

	componentDidMount() {

		this.pageChangeNoticeToServer()
		this.props.baseStore.socketData.currentReactView = this;

		this.props.baseStore.topHeader.show = true;
		this.props.baseStore.topHeader.backTo = '/entry';
		this.props.baseStore.topHeader.title = '课程临摹';




		this.props.courseListStore.GetPublishList();

		this.props.courseListStore.GetGradeListById(this.props.courseListStore.lastEntryPublishID);

		if (this.props.courseListStore.activeIndex == -1) {
			this.setState({
				activeIndex: 0
			})
		} else {
			this.setState({
				activeIndex: this.props.courseListStore.activeIndex
			})
		}



	}

	componentWillUnmount = () => {
		this.setState = (state, callback) => {
			return;
		};
	}



	handleClick = (index) => {


		var data = {
			header: this.props.baseStore.socketData.header,
			body: {
				type: "do_action",
				content: {
					action: 'handleClick',
					param: [index]
				}
			}
		};

		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);


		this.setState({
			activeIndex: index
		})

		var DirectoryID = this.props.courseListStore.pulishList[index].DirectoryID;
		this.props.courseListStore.GetGradeListById(DirectoryID);

		this.props.courseListStore.lastEntryPublishID = DirectoryID;
		this.props.courseListStore.activeIndex = index;




	}

	toShowPage = (item) => {

		var data = {
			header: this.props.baseStore.socketData.header,
			body: {
				type: "do_action",
				content: {
					action: 'toShowPage',
					param: [item]
				}
			}
		};

		this.props.baseStore.socketData.doEmit("teach_app_to_server", data);


		this.props.courseListStore.lastEntryPublishID = item.ParentGUID;
		this.props.courseListStore.lastEntryCourseID = item.DirectoryID;

		var directoryId = item.DirectoryID;
		this.props.history.push('/chapterList/' + directoryId);
	}

	render() {

		var sideBodyContainerCls = "side_body_container"
		if (this.props.courseListStore.pulishList.length > 10) {
			sideBodyContainerCls += " has_scroll_bar";
		}

		var mainContainerCls = "main_container"
		if (this.props.courseListStore.gradeList.length > 10) {
			mainContainerCls += " has_scroll_bar";
		}



		return (
			<div className="CourseListPage side_main_layout page_container animated fadeInDown  fast">
				<div className="side_wrap">
					<div className="side_header">正在练习</div>
					<div className="side_body">
						<div className={sideBodyContainerCls}>
							{
								this.props.courseListStore.pulishList && this.props.courseListStore.pulishList.map((item, index) => {
									var cls = "category_item";
									if (this.state.activeIndex == index) {
										cls += " active";
									}
									return (
										<div key={index} onClick={() => this.handleClick(index)} key={index} className={cls}>{item.DirectoryName}</div>
									)
								})
							}
						</div>


					</div>
				</div>
				<div className="main_wrap">
					<div className={mainContainerCls}>

						{
							this.props.courseListStore.gradeList && this.props.courseListStore.gradeList.map((item, index) => {
								return (
									<div key={index} className="book_each" key={index} onClick={() => this.toShowPage(item)}>
										<img src={this.props.baseStore.GetFinalImageUrl(item.ImageURL)} alt="" />
									</div>
								)
							})
						}


					</div>


				</div>

				{/* <div onClick={this.handleClick} className="entry_each"></div> */}


			</div>
		);
	}
}

export default CourseListPage;